<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>自由落体效果</title>
		<style>
		        *{
		            margin:0;
		            padding:0
		        }
		        body{
		            background-color: #ccc;
		        }
		        #box{
		            width:30px;
		            height:30px;
		            background-color: #aa55ff;
		            border-radius: 50%;
					position:relative;
					right: 0px;
					bottom: 40px;
		        }        
		</style>
		<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
		<script>
			function change(){
				go(0.5,0.9,30);
			}
			var i = null;
			function go(hp,vp,sp){
				var ball = document.getElementById('box');
					ball.style.right = '0px';
					ball.style.bottom = '40px';
					i&&clearInterval(i);
				var h=1,v=1,hp=(hp>0&&hp<1)?hp:0.2,vp=(vp>0&&vp<1)?vp:0.5,sp=(sp>20 || sp<1000)?sp:30;
					i=setInterval(function(){
						if(ball){
							var r=parseInt(ball.style.right)+h,b=parseInt(ball.style.bottom)-v;
							ball.style.right=r+'px';
							ball.style.bottom=b+'px';
							if(r>1000)clearInterval(i);
							if(b>-210){
								v+=2
							} else {
								h=(v>0)?v*hp:0;
								v*=(v>0)?-1*vp:0
							}
						}
					},sp);
			}
			
		</script>
	</head>
	<body>
		<div style="display: block; margin: 0 auto; width: 50%; " >
			<h1>弹跳前进</h1><br><br>
			<input type="button"value="开始运动" onclick="change()"/>
		</div>
		
		<div style="margin: 100px 0 0 900px;">
			<!-- <hr /> -->
			<!-- 设计一个小球 -->
			 <div id="box" style="margin-left:600px;"></div>
		</div>
		
	</body>
</html>
